<template>
  <div class="top-header clearfix">
     <!--<div class="top-header-news">-->
        <!--<i :class="new_news?'iconfont icon-wenhao':'iconfont icon-question'"></i>-->
        <!--<span>通知</span>-->
      <!--</div>-->
      <div class="top-header-admin">
        <img class="userHead" :src="user_img" alt="">
        <span>{{admin_name}}</span>

          <div class="top-header-admin-down">
              <p @click="leave">退出登录</p>
          </div>
      </div>
      <div class="app-open" v-if="logout">
          <div class="app-open-box" style="width: 360px;">
              <div class="app-open-title">
                  <span>提示</span>
              </div>
              <div class="app-open-content">
                  <div class="app-open-content-up">确定退出吗？</div>
                  <div class="app-center">
                      <el-button type="primary" @click="loginOut" class="app-button app-margin-r">确 定</el-button>
                      <el-button type="warning" @click="cancel" class="app-button" >取 消</el-button>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>
<script>
    import { getUserInfo } from '@/utils/auth';
    export default {
        name:'topHeader',
        data(){
            return{
                /* 退出登录弹窗是否打开 */
                logout: false,
                admin_name:'李老师',
                user_img: '',
                new_news:false
            }
        },
        methods: {
            /* 退出登录点击事件 */
            leave() {
                this.logout = true;
            },
            /* 退出登录确定按钮点击事件 */
            loginOut() {
                const _this = this;
                _this.$store.dispatch('LoginOut').then(function () {
                    _this.$router.push({path: '/login'});
                });
            },
            /* 取消退出登录点击事件 */
            cancel() {
                this.logout = false;
            }
        },
        mounted() {
            const _this = this;
            /* 初始化获取用户信息 */
            this.admin_name = getUserInfo().username;
            this.user_img = getUserInfo().head_image;

            // /* socket监听链接和断开链接事件 */
            // _this.$socket.on('connect', function () {
            //     console.log('链接成功!');
            //     // _this.$socket.emit('request_for_response', '2');
            // });
            // _this.$socket.on('disconnect', function () {
            //     console.log('断线，尝试重新链接');
            //      _this.$socket.connect();
            // });
            // _this.$socket.on('reconnect', function () {
            //     console.log('重新链接成功!');
            // });
        },
        sockets: {

        }
    }
</script>
<style lang="scss" scoped>
    .app-open-content-up{
        margin-bottom: 20px;
        text-align: center;
    }
    .app-margin-r{
        margin-right: 20px !important;
    }
    .top-header{
        height: 100%;

        display: flex;
        justify-content: flex-end;
        align-items: center;
        cursor: pointer;
        &-admin{
            cursor: pointer;
            img{
                display: inline-block;
                vertical-align: middle;
                margin-right: 11px;
            }
            span{
                color: #333;
                max-width: 86px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                /*font-size: 14px;*/
            }
        }
    }
    .top-header-admin{
        width: 130px;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        &-down {
            position: absolute;
            right: 0px;
            top: 55px;
            z-index: 999;
            background: #fff;
            width: 130px;
            box-shadow: 0px 2px 5px #ccc;
            display: none;
            p {
                text-align: center;
                line-height: 40px;
                cursor: pointer;
                &:hover {
                    color: #fff;
                    background: #27b494;
                }
            }
        }
        &:hover > &-down {
            display: block !important;
        }
    }
    .userHead{
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }
</style>